<%@page contentType="text/html; charset=utf-8"%>
<%@ include file="./inc/TagLibs.jsp"%>
<c:set var="pageTitle" value="剪切图片" />
<%@ include file="./inc/Title.jsp"%>
<head>
<link rel="stylesheet" type="text/css" href="/css/base.css" />
<link rel="stylesheet" type="text/css" href="/css/imgareaselect-default.css" />
<style>
	.portrait_left{height: auto; width: 100%;text-align: center;}
	/* #avatar{height: 280px;} */
	.portrait1{text-align: center;width: 100%;}
	#img_big_preview{height: 60px; margin: 0 auto; width: 60px;}
	.img_preview{border: 1px solid #000000; overflow: hidden; position: relative;}
	.img_preview img{margin: 0; position: relative;}
</style>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.imgareaselect.pack.js"></script>
<script src="/js/jQueryRotate.js"></script>
<script src="/js/popup_ext.js"></script>
<script language="javascript">
	function doCancel(){
		parent.ClosePop();
	}
	function doOk(){
		alert($('#id_left').val()+","+$('#id_top').val()+","+$('#id_right').val()+","+$('#id_bottom').val());
	}

	$(document).ready(function (){
		function adjust(el, selection) {
			var scaleX = $(el).width() / (selection.width || 1);
			var scaleY = $(el).height() / (selection.width || 1);
			$(el+' img').css({
				width: Math.round(scaleX*$('#avatar').width() ) + 'px',
				height: Math.round(scaleY*$('#avatar').height() ) + 'px',
				marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
				marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
			});
		}
		function preview(img, selection) {
			adjust('#img_big_preview', selection);
		}
		function createIas(x1,y1,x2,y2){
			return $('#avatar').imgAreaSelect({
				aspectRatio: "4:4",
				x1: x1,
				y1:y1,
				x2: x2,
				y2: y2,
				minHeight :60,
				minWidth: 60,
				instance: true,
				onSelectEnd:function(img, selection) {
					$('#id_top').val(selection.y1);
					$('#id_left').val(selection.x1);
					$('#id_right').val(selection.x2);
					$('#id_bottom').val(selection.y2);
				},
				onSelectChange: preview
			});
		}
		
		var ias=null;
		
		/**
			如果图像的高宽是固定的话,可以cancelSelection后重新setSelection
			但如果高宽是不顾定的话,在设置图片的url后,图片还没加载就已经执行完ias.update()了,这样导致剪切屏蔽层有点不正常
			因此只能remove掉图片后重新来(剪切区域超出图片范围的话不会显示,因此要根据图片高度重新设置)
		**/
		$("#img_file").change(function(e){
			if(ias!=null){
				ias.cancelSelection();
			}
			$("#avatar").remove();
		
			var file = e.target.files[0];
			var reader = new FileReader();
            reader.onload = function(e) {
            	$("#picture").append("<img id=\"avatar\" width=\"280px\" alt=\"请上传头像\" src=\""+e.target.result+"\">");
            	ias=createIas(60,60,120,120);
            	$("#avatar1").attr("src", e.target.result);
            	
            	//alert(e.target.naturalWidth);
            	alert(document.getElementById("avatar").naturalWidth);
            	/**
                $("#avatar").attr("src", e.target.result);
				ias.setSelection(60,60,100,100);
				ias.setOptions({ show: true });
	            ias.update();
	            **/
            }
            reader.readAsDataURL(file);
		});
	}); 

	function avatarrotateleft(){
		var value=$('#id_rotation').val()-90;
		$('#avatar').rotate({ animateTo:value});
		$('#avatar1').rotate({ animateTo:value});
		$('#id_rotation').val(value);
	}
	function avatarrotateright(){
		var value=$('#id_rotation').val()-0+90;
		$('#avatar').rotate({ animateTo:value});
		$('#avatar1').rotate({ animateTo:value});
		$('#id_rotation').val(value);
	}
</script>

</head>
<body oncontextmenu="return false"  class="sheet modal-dialog" style=" padding-top:15px;">
<div class="sheet-main" style="width:770px;">
	  <div class="sheet-list" >
	    <div class="modal-main search-business">
	    	<div style="width:100%;">
				<c:set var="pageTopTitle" value="剪切图片" />
				<c:set var="pageTopMark" value="" />
				<%@ include file="inc/PageTop.jsp"%>
				
				<div class="blank12"></div>
				<table border="0" width="100%">
					<tr>
						<td width="50%" height="280px">
							<table border="0" height="100%" align="center">
								<tr>
									<td align="center">选择图片：<input type="file" id="img_file" accept="image/*" /></td>
								</tr>
								<tr>
									<td align="center" height="260px" valign="top">
										<br>
										<div class="portrait_left">
											<div id="picture" style="border: 1px solid #000000;overflow: hidden;position: relative;height: auto;width: 280px;margin: 0 auto;">
												<img id="avatar" width="280px" alt="请选择图片" src="">
											</div>
											
											<a href="javascript:;" onClick="avatarrotateleft();">向左旋转</a>
											<a href="javascript:;" onClick="avatarrotateright();">向右旋转</a>
										</div>
										
									</th>
								</tr>
							</table>
						</td>
						<td width="50%" valign="top">
								
							<div class="portrait1">
								<p>您上传的头像会自动生成小尺寸头像</p>
								<p>请注意小尺寸的头像是否清晰</p>
								<br>
								<div id="img_big_preview" class="img_preview">
									<img id="avatar1" alt="头像预览" src="" style="width: 280px; margin-left: -60px; margin-top: -60px;">
								</div>
								<br>
								<p>尺寸：60×60</p>
								<br>
								<input type="button" class="buttom-a" value=" 确 定 " onClick="doOk();">
								<input type="button" class="buttom-a" value=" 取 消 " onClick="doCancel();">
								<!--通过生成尺寸和旋转角度 后台获取尺寸和旋转角度再进行裁剪-->
								<input id="id_top" type="hidden" value="0">
								<input id="id_left" type="hidden" value="0">
								<input id="id_right" type="hidden" value="0">
								<input id="id_bottom" type="hidden" value="0">
								<input id="id_rotation" type="hidden" value="0">
							</div>
							
						</td>
					</tr>
				</table>
				
			</div>
	  	</div>
	  </div>
</div>			   	
</body>
</html>